<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../style/cake.css">
    <link rel="stylesheet" href="../plugin/element-ui/index.css">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="addcake_app">
        <div>{{titleFlag?"添加商品":"修改商品"}}</div>
        <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="名称" prop="name">
                <el-input style="width: 16%" type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
                    label="分类:"
                    prop="categoryId"
            >
                <el-select
                        v-model="ruleForm.categoryId"
                        placeholder="请选择分类"
                >
                    <el-option v-for="(item,index) in categoryList" :key="index" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="价格" prop="price">
                <el-input style="width: 16%" v-model.number="ruleForm.price"></el-input>
            </el-form-item>
            <el-form-item label="数量" prop="number">
                <el-input style="width: 16%" v-model.number="ruleForm.number"></el-input>
            </el-form-item>
            <div>
                <el-form-item
                        label="图片:"
                        prop="image"
                        class="uploadImg"
                >
                    <el-upload
                            style="max-width: 25%"
                            class="upload-demo"
                            action="/common/upload"
                            :on-preview="handlePreview"
                            :on-success="handleSuccess"
                            :on-remove="handleRemove"
                            :file-list="imageUrl"
                            list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </div>
            <el-form-item label="描述" prop="description">
                <el-input
                        style="max-width: 23%"
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="ruleForm.description">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script src="../plugin/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../plugin/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../plugin/axios/axios.min.js"></script>
    <script src="../js/cake.js"></script>
    <script>
        let app = new Vue({
            el:"#addcake_app",
            data() {
                return {
                    imageUrl:[],
                    categoryList:[],
                    fileList:[{
                        uid:''
                    }],
                    ruleForm: {
                        name:'',
                        categoryId:'',
                        price:0,
                        number:0,
                        image:[],
                        description:''
                    },
                    titleFlag:true,
                };
            },
            created(){
                let id=requestUrlParam()
                if(id){
                    this.init(id)
                }
                this.getCategoryList()
            },
            methods: {
               async init(id){
                    this.titleFlag = false
                    let res =await getCakeInfo(id)
                    this.ruleForm = res.data.data
                    for(let i=0;i<this.ruleForm.image.length;i++){
                       let name = this.ruleForm.image[i].split("/")
                       this.imageUrl.push({
                           name:name[3],
                           url:this.ruleForm.image[i]
                       })
                   }

                },
                async submitForm(formName) {
                   if(this.titleFlag){
                       this.$refs[formName].validate(async (valid) => {
                           if (valid) {
                               let res = await submitCake(this.ruleForm)
                               if(res.data.code==1){
                                   this.$message({
                                       message: res.data.data,
                                       type: 'success'
                                   });
                               }
                               window.location.href="../page/cake.html"
                           } else {
                               console.log('error submit!!');
                               return false;
                           }
                       });
                   }else{
                       let res = await EditCake(this.ruleForm)
                       if(res.data.code==1){
                           window.location.href="../page/cake.html"
                           this.$message({
                               type: 'success',
                               message: '修改成功!'
                           });
                       }
                   }

                },
                async getCategoryList(){
                    let res = await getList()
                    if(res.data.code==1){
                        this.categoryList=res.data.data
                    }
                },
                handleRemove(file, fileList) {
                    // for(let i=0;i<this.imageUrl.length;i++){
                    //     if(this.imageUrl[i]==file.uid){
                    //         this.imageUrl.splice(i,1)
                    //     }
                    // }
                    this.imageUrl = fileList
                    console.log(fileList)
                    let index= this.ruleForm.image.indexOf(file.url)
                    this.ruleForm.image.splice(index,1)
                },
                handlePreview(file) {
                    console.log(file);
                },
                handleSuccess(file){
                    this.imageUrl.push({
                        name:file.data,
                        url:"../../img/"+file.data
                    })
                    this.ruleForm.image.push("../../img/"+file.data)
                }
            }
        })
    </script>
</body>
</html>